<template>
  <div class="playback">
    <div class="playback-tite">
      <div class="flex">
        <div class="img-box">
          <img src="@/assets/ivr/jump.svg" alt="" class="w-16 h-16" />
        </div>
        <div class="titles">{{ name }}</div>
      </div>
      <div>
        <el-popover placement="bottom" trigger="click" width="100">
          <div class="node-list">
            <div class="p-8" @click="copyNode">复制</div>
            <el-divider style="margin: 4px 0" />
            <div class="p-8" @click.stop="delNode">删除</div>
          </div>
          <template #reference>
            <svg
              t="1744771665484"
              class="icon cursor-pointer"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5189"
              width="16"
              height="16"
            >
              <path
                d="M97.95349285 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614346 0 94.17807171 94.17807171 0 1 0-188.35614346 0Z"
                fill="#2c2c2c"
                p-id="5190"
              ></path>
              <path
                d="M510.81520458 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614344 0 94.17807171 94.17807171 0 1 0-188.35614344 0Z"
                fill="#2c2c2c"
                p-id="5191"
              ></path>
              <path
                d="M923.6769163 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614343 0 94.17807171 94.17807171 0 1 0-188.35614343 0Z"
                fill="#2c2c2c"
                p-id="5192"
              ></path>
            </svg>
          </template>
        </el-popover>
      </div>
    </div>
    <div class="playback-content">
      <el-form :model="formState" label-width="100" :rules="rules">
        <el-form-item label="节点名称" required>
          <el-input
            v-model="formState.name"
            placeholder="请输入节点名称"
            @input="updateProperties"
          ></el-input>
        </el-form-item>
        <el-form-item label="标签名称">
          <el-input
            v-model="formState.label"
            placeholder="请输入标签名称"
            @input="updateProperties"
          ></el-input>
        </el-form-item>
        <el-form-item label="话术描述">
          <el-input
            v-model="formState.aiword"
            type="textarea"
            placeholder="请输入话术描述"
            @input="updateProperties"
          ></el-input>
        </el-form-item>
        <el-form-item label="跳转到" prop="jump_type">
          <el-select
            class="w-100%"
            v-model="formState.jump_type"
            placeholder="请选择跳转到的节点"
            @change="updateProperties"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.properties.name"
              :value="item.id"
            >
            </el-option>
            <div class="text-center">
              <el-button @click="refreshNode" type="primary" link>刷新节点列表</el-button>
            </div>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="流程" v-if="formState.jump_type == 4">
          <el-select
            class="w-100%"
            v-model="formState.ivrFlowId"
            placeholder="请选择要跳转的流程"
            @change="updateProperties"
          >
            <el-option
              v-for="item in ivrOption"
              :disabled="item.disabled"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, createVNode } from 'vue'
import { useIvrStore } from '@/store/modules/ivr'
import { generateRandomString } from '@/utils/node'
import { cloneDeep } from 'lodash-es'
import { getIvrList } from '@/api/call/ivr'
const useStore = useIvrStore()
export default defineComponent({
  name: 'JumpNode',
  inject: ['getNode', 'getGraph'],
  data() {
    return {
      formState: {
        jump_type: '',
        aiword: '',
        name: '',
        label: '',
        ivrFlowId: ''
      },
      name: '',
      id: 'jump_',
      rules: {
        jump_type: [{ required: true, message: '请选择要跳转', trigger: 'change' }],
        ivrFlowId: [{ required: true, message: '请选择要跳转的流程', trigger: 'change' }]
      },
      options: [
        // {
        //   label: '挂机',
        //   value: 1
        // },
        // {
        //   label: '等待用户应答',
        //   value: 2
        // },
        // {
        //   label: '下一个主流程',
        //   value: 3
        // },
        // {
        //   label: '指定主动流程',
        //   value: 4
        // },
        // {
        //   label: '转人工',
        //   value: 5
        // }
      ],
      ivrOption: []
    }
  },
  mounted() {
    const node = (this as any).getNode()
    const graph = (this as any).getGraph()
    const { nodes } = graph
    const index = nodes.findIndex((item) => item.id == node.id)
    const httpArr = nodes.filter((item) => item.properties.businessType == 9)

    const { name, jump_type, aiword, label, ivrFlowId, nodeName, nodeIndex } =
      nodes[index].properties

    this.name = nodeName + (nodeIndex == 0 ? '' : nodeIndex)

    Object.assign(this.formState, { name, jump_type, aiword, label, ivrFlowId })

    if (useStore.getLf) {
      this.options = useStore.getLf.getGraphData().nodes.filter((item) => item.id != node.id)
    }
  },
  methods: {
    refreshNode() {
      if (useStore.getLf) {
        const node = (this as any).getNode()
        this.options = useStore.getLf.getGraphData().nodes.filter((item) => item.id != node.id)
      }
    },
    updateProperties(type) {
      const node = (this as any).getNode()
      const graph = (this as any).getGraph()
      const { nodes } = graph
      const index = nodes.findIndex((item) => item.id === node.id)
      if (index !== -1) {
        const obj = cloneDeep(nodes[index].properties)
        if (this.formState.jump_type == 4) {
          obj.height = 390
        } else {
          obj.height = 340
        }
        const updatedNode = { ...obj, ...this.formState }
        useStore.getLf.setProperties(node.id, updatedNode)
      }
    },
    // 删除节点
    delNode() {
      const node = (this as any).getNode()
      ElMessageBox.confirm('确定要删除此节点吗？', '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消'
      }).then(() => {
        useStore.getLf.deleteNode(node.id)
      })
    },
    // 复制节点
    copyNode() {
      const node = (this as any).getNode()
      const CloneNode = useStore.getLf.cloneNode(node.id)
      useStore.getLf.changeNodeId(CloneNode.id, this.id + generateRandomString(6))
    },
    getParameterFromUrl(paramName) {
      const url = new URL(window.location.href)
      return url.searchParams.get(paramName)
    },
    async getIvrOption() {
      const groupId = this.getParameterFromUrl('groupId')
      const data = await getIvrList(groupId)
      const id = this.getParameterFromUrl('id')
      data.forEach((item) => {
        if (item.id == id) {
          item.disabled = true
        } else {
          item.disabled = false
        }
      })
      this.ivrOption = data
    }
  },
  computed: {}
})
</script>
<style scoped>
.playback-content {
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  padding: 20px;
}
.playback {
  padding: 16px;
  box-shadow: 0 2px 4px #1f23291f;
  border: 2px solid #fff !important;
  background: #ffffff;
  border-radius: 8px;
}
.img-box {
  background: #67c23a;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: 8px;
}
.playback-tite {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  justify-content: space-between;
}
.w-16 {
  width: 16px;
}
.h-16 {
  height: 16px;
}
.titles {
  font-size: 16px;
  color: #1f2329;
  font-weight: bold;
}
.flex {
  display: flex;
  align-items: center;
}
.p-8 {
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.h-l {
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
}
.h-l:before {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 80%;
  content: '';
  background: #407fff;
}
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
